import { AllHTMLAttributes, createElement, type FC } from 'react';
import classNames from 'classnames';

import { labelDefaultProps } from './defaultProps';
import type { LabelOptions } from './type';

export interface LabelProps extends LabelOptions, Omit<AllHTMLAttributes<HTMLElement>, 'as' | 'color' | 'size'> {}

const Label: FC<LabelProps> = (props) => {
  const {
    className,
    as,
    image,
    color,
    detail,
    close,
    pointing,
    basic,
    corner,
    tag,
    ribbon,
    icon,
    attached,
    horizontal,
    floating,
    circular,
    empty,
    size,
    inverted,
    children,
    forwardedRef,
    ...labelProps
  } = props;

  return createElement(
    as!,
    {
      ref: forwardedRef,
      className: classNames(
        floating,
        { floating },
        'ui',
        color,
        pointing,
        { pointing, basic, image, tag, horizontal, empty, circular },
        size,
        corner,
        { corner },
        ribbon,
        { ribbon },
        icon || close,
        { icon: icon || close === 'left' },
        attached,
        { attached, inverted },
        'label',
        className,
      ),
      ...labelProps,
    },
    [
      close === 'left' && <i key="delete" className="delete icon" />,
      children,
      detail && (
        <div key="detail" className="detail">
          {detail}
        </div>
      ),
      close && close !== 'left' && <i key="delete" className="delete icon" />,
    ],
  );
};

Label.displayName = 'Label';
Label.defaultProps = labelDefaultProps;

export default Label;
